<nz-card
  class="home-card"
  nzTitle="Knowledgebase Statistics"
  class="home-card"
  [nzExtra]="statsRadioGroup"
  nzSize="small">
  <ng-template #statsRadioGroup>
    <nz-radio-group
      [(ngModel)]="statsType"
      nzSize="small">
      <label
        nz-radio-button
        nzValue="allTime"
        >Total</label
      >
      <label
        nz-radio-button
        nzValue="newThisWeek"
        >Weekly</label
      >
      <label
        nz-radio-button
        nzValue="newThisMonth"
        >Monthly</label
      >
      <label
        nz-radio-button
        nzValue="newThisYear"
        >Yearly</label
      >
    </nz-radio-group>
  </ng-template>
  <ng-container *ngIf="stats$ | ngrxPush as stats; else isLoading">
    <nz-row nzGutter="8">
      <nz-col nzFlex="1">
        <a routerLink="/assertions">
          <nz-statistic
                    [nzTitle]="label() + ' Assertions'"
                    [nzValue]="(stats.assertions[statsType] | number)!"
                    [nzPrefix]="assertionIcon"
                  ></nz-statistic>
          <ng-template #assertionIcon>
            <i
              nz-icon
              nzTheme="twotone"
              [nzTwotoneColor]="'Assertion' | entityColor"
              nzType="civic-assertion"></i>
          </ng-template>
        </a>
      </nz-col>
      <nz-col nzFlex="1">
        <a routerLink="/evidence">
          <nz-statistic
                    [nzTitle]="label() + ' Evidence'"
                    [nzValue]="(stats.evidenceItems[statsType] | number)!"
                    [nzPrefix]="evidenceIcon"></nz-statistic>
          <ng-template #evidenceIcon>
            <i
              nz-icon
              nzTheme="twotone"
              [nzTwotoneColor]="'EvidenceItem' | entityColor"
              nzType="civic-evidence"></i>
          </ng-template>
        </a>
      </nz-col>
      <nz-col nzFlex="1">
        <a routerLink="/features">
          <nz-statistic
                    [nzTitle]="label() + ' Features'"
                    [nzValue]="(stats.features[statsType] | number)!"
                    [nzPrefix]="featureIcon"></nz-statistic>
          <ng-template #featureIcon>
            <i
              nz-icon
              nzTheme="twotone"
              [nzTwotoneColor]="'Feature' | entityColor"
              nzType="civic-feature"></i>
          </ng-template>
        </a>
      </nz-col>
      <nz-col nzFlex="1">
        <a routerLink="/variants">
        <nz-statistic
              [nzTitle]="label() + ' Variants'"
              [nzValue]="(stats.variants[statsType] | number)!"
              [nzPrefix]="variantIcon"></nz-statistic>
          <ng-template #variantIcon>
            <i
              nz-icon
              nzTheme="twotone"
              [nzTwotoneColor]="'Variant' | entityColor"
              nzType="civic-variant"></i>
          </ng-template>
        </a>
      </nz-col>
      <nz-col nzFlex="1">
        <a routerLink="/molecular-profiles">
          <nz-statistic
                    [nzTitle]="label() + ' Molecular Profiles'"
                    [nzValue]="(stats.molecularProfiles[statsType] | number)!"
                    [nzPrefix]="mpIcon"></nz-statistic>
          <ng-template #mpIcon>
            <i
              nz-icon
              nzTheme="twotone"
              [nzTwotoneColor]="'MolecularProfile' | entityColor"
              nzType="civic-molecularprofile"></i>
          </ng-template>
        </a>
      </nz-col>
    </nz-row>
    <nz-row nzGutter="8">
      <nz-col nzFlex="1">
        <a routerLink="/diseases">
          <nz-statistic
              [nzTitle]="label() + ' Diseases'"
              [nzValue]="(stats.diseases[statsType] | number)!"
              [nzPrefix]="diseaseIcon"></nz-statistic>
          <ng-template #diseaseIcon>
            <i
              nz-icon
              nzTheme="twotone"
              [nzTwotoneColor]="'Disease' | entityColor"
              nzType="civic-disease"></i>
          </ng-template>
        </a>
      </nz-col>
      <nz-col nzFlex="1">
        <a routerLink="/therapies">
          <nz-statistic
              [nzTitle]="label() + ' Therapies'"
              [nzValue]="(stats.therapies[statsType] | number)!"
              [nzPrefix]="therapyIcon"></nz-statistic>
          <ng-template #therapyIcon>
            <i
              nz-icon
              nzTheme="twotone"
              [nzTwotoneColor]="'Therapy' | entityColor"
              nzType="civic-therapy"></i>
          </ng-template>
        </a>
      </nz-col>
      <nz-col nzFlex="1">
        <a routerLink="/sources">
          <nz-statistic
              [nzTitle]="label() + ' Sources'"
              [nzValue]="(stats.sources[statsType] | number)!"
              [nzPrefix]="sourceIcon"></nz-statistic>
          <ng-template #sourceIcon>
            <i
              nz-icon
              nzTheme="twotone"
              [nzTwotoneColor]="'Source' | entityColor"
              nzType="civic-source"></i>
          </ng-template>
        </a>
      </nz-col>
      <nz-col nzFlex="1">
        <nz-statistic
            [nzTitle]="label() + ' Revisions'"
            [nzValue]="(stats.revisions[statsType] | number)!"
            [nzPrefix]="revisionsIcon"></nz-statistic>
        <ng-template #revisionsIcon>
          <i
            nz-icon
            nzTheme="twotone"
            [nzTwotoneColor]="'Revision' | entityColor"
            nzType="civic-revision"></i>
        </ng-template>
      </nz-col>
      <nz-col nzFlex="1">
        <a routerLink="/users">
          <nz-statistic
              [nzTitle]="label() + ' Contributors'"
              [nzValue]="(stats.users[statsType] | number)!"
              [nzPrefix]="userIcon"></nz-statistic>
          <ng-template #userIcon>
            <i
              nz-icon
              nzTheme="twotone"
              [nzTwotoneColor]="'Curator' | entityColor"
              nzType="civic-user"></i>
          </ng-template>
        </a>
      </nz-col>
    </nz-row>
  </ng-container>
  <ng-template #isLoading>
    <nz-row nzGutter="8">
      <nz-col nzFlex="1">
        <nz-statistic
          [nzTitle]="label() + ' Assertions'"
          [nzValue]="'--'"></nz-statistic>
      </nz-col>
      <nz-col nzFlex="1">
        <nz-statistic
          [nzTitle]="label() + ' Evidence'"
          [nzValue]="'--'"></nz-statistic>
      </nz-col>
      <nz-col nzFlex="1">
        <nz-statistic
          [nzTitle]="label() + ' Features'"
          [nzValue]="'--'"></nz-statistic>
      </nz-col>
      <nz-col nzFlex="1">
        <nz-statistic
          [nzTitle]="label() + ' Variants'"
          [nzValue]="'--'"></nz-statistic>
      </nz-col>
      <nz-col nzFlex="1">
        <nz-statistic
          [nzTitle]="label() + ' Molecular Profiles'"
          [nzValue]="'--'"></nz-statistic>
      </nz-col>
    </nz-row>
    <nz-row nzGutter="8">
      <nz-col nzFlex="1">
        <nz-statistic
          [nzTitle]="label() + ' Diseases'"
          [nzValue]="'--'"></nz-statistic>
      </nz-col>
      <nz-col nzFlex="1">
        <nz-statistic
          [nzTitle]="label() + ' Therapies'"
          [nzValue]="'--'"></nz-statistic>
      </nz-col>
      <nz-col nzFlex="1">
        <nz-statistic
          [nzTitle]="label() + ' Sources'"
          [nzValue]="'--'"></nz-statistic>
      </nz-col>
      <nz-col nzFlex="1">
        <nz-statistic
          [nzTitle]="label() + ' Revisions'"
          [nzValue]="'--'"></nz-statistic>
      </nz-col>
      <nz-col nzFlex="1">
        <nz-statistic
          [nzTitle]="label() + ' Contributors'"
          [nzValue]="'--'"></nz-statistic>
      </nz-col>
    </nz-row>
  </ng-template>
</nz-card>
